<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../static/layui/css/layui.css"  media="all">
  <script src="../static/layui/layui.js" charset="utf-8"></script>
  <script src="../static/echarts.min.js"></script>

</head>
<style>
    .layui-form-item{
        width: 60%;

    }
    .layui-tab-item{
        padding-top:40px ;
    }
    .layui-tab-item>.model-predict{
        float: left;
        width: 50%;

    }
    .model-predict .layui-form-item{
        width: 100%;

    }
    .predict-result{
        float: right;
        width: 50%;
        height: 550px;
         margin-top: -20px;

    }
</style>
<body>
<div class="layui-tab layui-tab-card" style="width: 80%;margin: 60px auto">
  <ul class="layui-tab-title">
    <li class="layui-this">Lstm模型</li>
    <li>Svr模型</li>
    <li>模型预测</li>
  </ul>
  <div class="layui-tab-content" style="height: 500px">

      <!-- lstm建模 -->
    <div class="layui-tab-item layui-show">
        <!-- action="http://localhost:5000/build_lstm_data" method=post -->
        <form class="layui-form"  >
            <div class="layui-form-item">
                <label class="layui-form-label">ID:</label>
                <div class="layui-input-block">
                    <input type="text" name="id" lay-verify="required" autocomplete="off" placeholder="请输入站点ID" class="layui-input">
                </div>
            </div>
            <div class="layui-form layui-form-item">
                <label class="layui-form-label">起报时间</label>
                <div class="layui-input-block">
                    <select name="time" lay-filter="aihao">
                        <option value="08">08</option>
                        <option value="20">20</option>
                    </select>
                </div>
            </div>
            <div class="layui-form layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <select name="type" lay-filter="aihao">
                        <option value ="10UV">10UV</option>
  			            <option value ="10FG6">10FG6</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">原始文件夹路径:</label>
                <div class="layui-input-block">
                    <input type="text" name="dir" lay-verify="required" autocomplete="off" placeholder="请输入原始文件夹路径" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button button class="layui-btn" lay-submit lay-filter="form_lstm">上传</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

    </form>
    </div>
      <!-- svr建模 -->
    <div class="layui-tab-item ">
        <!-- action="http://localhost:5000/build_svr_data" method=post -->
        <form class="layui-form" >
            <div class="layui-form-item">
                <label class="layui-form-label">ID:</label>
                <div class="layui-input-block">
                    <input type="text" name="id" lay-verify="required" autocomplete="off" placeholder="请输入站点ID" class="layui-input">
                </div>
            </div>
            <div class="layui-form layui-form-item">
                <label class="layui-form-label">起报时间</label>
                <div class="layui-input-block">
                    <select name="time" lay-filter="aihao">
                        <option value="08">08</option>
                        <option value="20">20</option>
                    </select>
                </div>
            </div>
            <div class="layui-form layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <select name="type" lay-filter="aihao">
                        <option value ="10UV">10UV</option>
  			            <option value ="10FG6">10FG6</option>
                    </select>
                </div>
            </div>
            <div class="layui-form layui-form-item">
                <label class="layui-form-label">预报第几天</label>
                <div class="layui-input-block">
                    <select name='predict_day' lay-filter="aihao">
                        <option value =1>1</option>
			            <option value =2>2</option>
			            <option value =3>3</option>
			            <option value =4>4</option>
			            <option value =5>5</option>
			            <option value =6>6</option>
			            <option value =7>7</option>
                        <option value =8>8</option>
			            <option value =9>9</option>
			            <option value =10>10</option>
                    </select>
                </div>
            </div>
            <div class="layui-form layui-form-item">
                <label class="layui-form-label">季节</label>
                <div class="layui-input-block">
                    <select name='season' lay-filter="aihao">
                        <option value ="3-4">3-4</option>
  			            <option value ="5-6">5-6</option>
  			            <option value ="7-9">7-9</option>
  			            <option value ="10-11">10-11</option>
  			            <option value ="12-2">12-2</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">ob原始文件路径:</label>
                <div class="layui-input-block">
                    <input type="text" name="ob_dir" lay-verify="required" autocomplete="off" placeholder="请输入ob原始文件路径" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">ec原始文件路径:</label>
                <div class="layui-input-block">
                    <input type="text" name="ec_dir" lay-verify="required" autocomplete="off" placeholder="请输入ec原始文件路径" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button button class="layui-btn" lay-submit lay-filter="form_svr">上传</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
      <!-- 模型预测 -->
    <div class="layui-tab-item ">
          <!-- action="http://localhost:5000/predict" method=post -->
        <form class="layui-form model-predict" >
            <div class="layui-form-item">
                <label class="layui-form-label">ID:</label>
                <div class="layui-input-block">
                    <input type="text" name="id" lay-verify="required" autocomplete="off" placeholder="请输入站点ID" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">预测日期：</label>
                <div class="layui-input-block">
                    <input name="predict_date" type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
                </div>
            </div>
            <div class="layui-form layui-form-item">
                <label class="layui-form-label">起报时间</label>
                <div class="layui-input-block">
                    <select name="time" lay-filter="aihao">
                        <option value="08">08</option>
                        <option value="20">20</option>
                    </select>
                </div>
            </div>
            <div class="layui-form layui-form-item">
                <label class="layui-form-label">预测第几天</label>
                <div class="layui-input-block">
                    <select name='predict_day' lay-filter="aihao">
                        <option value =1>1</option>
                        <option value =2>2</option>
                        <option value =3>3</option>
                        <option value =4>4</option>
                        <option value =5>5</option>
                        <option value =6>6</option>
                        <option value =7>7</option>
                        <option value =8>8</option>
                        <option value =9>9</option>
                        <option value =10>10</option>
                    </select>
                </div>
            </div>
            <div class="layui-form layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <select name="type" lay-filter="aihao">
                        <option value ="10UV">10UV</option>
                        <option value ="10FG6">10FG6</option>
                </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">ob原始文件路径:</label>
                <div class="layui-input-block">
                    <input type="text" name="ob_dir" lay-verify="required" autocomplete="off" placeholder="请输入ob原始文件路径" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">ec原始文件路径:</label>
                <div class="layui-input-block">
                    <input type="text" name="ec_dir" lay-verify="required" autocomplete="off" placeholder="请输入ec原始文件路径" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button button class="layui-btn" lay-submit lay-filter="form_predict">上传</button>
                    <button button class="layui-btn" lay-submit lay-filter="word_load">生成报文</button>
                </div>
            </div>

        </form>
        <div class="predict-result">
            <div id="main" style="width: 500px;height:480px;padding-left: 50px;"></div>
        </div>
    </div>
</div>
</body>

<script>

        layui.use('upload', function() {
        layui.use(['form', 'layedit', 'element','laydate'], function () {
            var form = layui.form
            var $ = layui.jquery
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
            //触发事件
            var active = {
                tabAdd: function () {
                    //新增一个Tab项
                    element.tabAdd('demo', {
                        title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                        , content: '内容' + (Math.random() * 1000 | 0)
                        , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                    })
                }
                , tabDelete: function (othis) {
                    //删除指定Tab项
                    element.tabDelete('demo', '44'); //删除：“商品管理”


                    othis.addClass('layui-btn-disabled');
                }
                , tabChange: function () {
                    //切换到指定Tab项
                    element.tabChange('demo', '22'); //切换到：用户管理
                }
            };

            //常规用法 时间控件
            laydate.render({
                elem: '#test1'
            });
            $('.site-demo-active').on('click', function () {
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            //Hash地址的定位
            var layid = location.hash.replace(/^#test=/, '');
            element.tabChange('test', layid);

            element.on('tab(test)', function (elem) {
                location.hash = 'test=' + $(this).attr('lay-id');
            });

            //日期
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#date1'
            });

            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                title: function (value) {
                    if (value.length < 5) {
                        return '标题至少得5个字符啊';
                    }
                }
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
                , content: function (value) {
                    layedit.sync(editIndex);
                }
            });

            //监听指定开关
            form.on('switch(switchTest)', function (data) {
                layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                    offset: '6px'
                });
                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
            });
            //监听lstm提交事件
            form.on('submit(form_lstm)', function(data){
                layer.msg('加载模型需要一定时间，请耐心等待')
			    $.post("http://localhost:5000/build_lstm_data",data.field,function(res){
                    layer.msg(res)
                    layer.msg('LSTM加载完毕')
                })
				return false;  //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
			//监听svr提交事件
            form.render();
			form.on('submit(form_svr)', function(data){
			    var svrData=data.field
			    layer.msg('加载模型需要一定时间，请耐心等待')
                var url='http://localhost:5000/build_svr_data'
                $.ajax({
                    url:url,
                    type:'post',
                    data:svrData,
                    success(res){
                        console.log(res)
                        layer.msg('SVR加载完毕')
                    }
                })

				return false;  //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //监听生成报文提交事件
            form.on('submit(word_load)', function(data){
                //layer.msg('加载模型需要一定时间，请耐心等待')
			    $.post("http://localhost:5000/word",data.field,function(res){
                    //layer.msg(res)
                    layer.msg('word已经生成，请到./data/word路径下查看')
                })
				return false;  //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

			//监听predict提交事件
			form.on('submit(form_predict)', function(data){
			    $.post("http://localhost:5000/predict",data.field,function(res){
                    function getNextDate(date, day) {
　　                      var dd = new Date(date);
　　                      dd.setDate(dd.getDate() + day);
　　                      var y = dd.getFullYear();
　　                      var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
　　                      var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
　　                      return  m + "-" + d;
                    };
                 let dateArr=[]
                 for (var i = 1; i < Number(data.field.predict_day) + 1; i++) {
                     dateArr.push(getNextDate(data.field.predict_date,i))
                 }
                 let feature = ''
                 if (data.field.type == '10UV'){
                    feature = '十米平均风'
                 }else{
                    feature = '十米阵风'
                 }
                 var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
    title: {
        text: '未来风速变化',
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['十米平均风', '十米阵风']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {

            }
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dateArr
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} m/s'
        }
    },
    series: [
        {
            //name: '十米平均风',
            name:feature,
            type: 'line',
            data: res.predictions,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

                })
				return false;  //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
			// 基于准备好的dom，初始化echarts实例


            //表单赋值
            layui.$('#LAY-component-form-setval').on('click', function () {
                form.val('example', {
                    "username": "贤心" // "name": "value"
                    , "password": "123456"
                    , "interest": 1
                    , "like[write]": true //复选框选中状态
                    , "close": true //开关状态
                    , "sex": "女"
                    , "desc": "我爱 layui"
                });
            });

            //表单取值
            layui.$('#LAY-component-form-getval').on('click', function () {
                var data = form.val('example');
                alert(JSON.stringify(data));
            });
        })
    })

</script>
</html>